<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/iscroll.Veb.js"></script>
    <script src="./js/zepto.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        html {
            font-size: 26.667vw;
        }

        header,
        footer {
            position: absolute;
            left: 0;
            width: 100%;
            line-height: .5rem;
            background: #333;
            text-align: center;
            color: white;
            font-size: 0.16rem
        }

        header {
            top: 0
        }

        footer {
            bottom: 0
        }

        main {
            position: absolute;
            top: 0.5rem;
            bottom: 0.5rem;
            background: #f0f0f0;
            overflow-y: scroll;
        }

        .content {
            width: 3.75rem;
            text-align: center;
            margin: 0 auto;
        }



        .content button {
            outline: 0;
            /* border: none; */
            background-color: lightslategrey;
            line-height: 0.2rem;
            border-radius: 0.08rem;
            padding: 0 0.1rem;
            text-align: center;

        }

        li {
            list-style: none;
        }

        #foot_list {
            overflow: hidden;
        }

        #foot_list li {
            float: left;
            width: 0.8rem;
            box-sizing: border-box;
            /* padding: 5vw; */
            margin: 0 .066rem;
            box-shadow: 0 0 .032rem;
            border-radius: 0.08rem;
            transition: all .5s;
            margin-top: .3rem;
        }

        #foot_list li:hover {
            transform: rotateY(10deg);
        }

        #foot_list img {
            width: 100%;
            /* border-radius: 50%; */

        }
        #foot_list h4 {
            text-align: center;
            font-size: 0.096rem;
            overflow: hidden;
            white-space: nowrap;
        }

        #foot_list a {
            display: block;
            text-align: center;
            color: blueviolet;

        }

        .tip {
            line-height: 40px;
            font-size: 0.14rem;
            text-align: center;
            color: #3b3b3b
        }

        #loading {
            background: url('http://www.vebcoder.cn/img/loading.4bbc20d4.jpg')center center no-repeat;
            background-color: #eeeeee;
            opacity: 0.8;
            background-size: 500px auto;
            /* 不透明度 */
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            display: none;
        }
    </style>
</head>

<body>
    <!-- <a href="songs.html?singer=周深">周深</a> -->

    <header>
        我是固定头部
    </header>

    <main id="content_view">
        <!-- 主体内容区域 -->

        <div class="content">
            <div class="tip">下拉刷新</div>

            <button list-style="0">全部</button>
            <button list-style="1">华语男</button>
            <button list-style="2">华语女</button>
            <button list-style="3">华语组合</button>
            <button list-style="4">日韩男</button>
            <button list-style="5">日韩女</button>
            <button list-style="6">日韩组合</button>
            <button list-style="7">欧美男</button>
            <button list-style="8">欧美女</button>
            <button list-style="9">欧美组合 </button>
            <button list-style="10">其他</button>
            <div id="list-center">
                <ul id="foot_list">
                    <!-- <li>
                        <img src="http://img1.kuwo.cn/star/starheads/300/10/6/294045140.jpg" alt="">
                        <h4> <a href="">周杰伦</a> </h4>
                    </li>
                  -->
                </ul>
            </div>

        </div>

        <div id="loading">

            <!-- http://www.vebcoder.cn/img/loading.4bbc20d4.jpg -->
        </div>
        </div>
    </main>

    <footer>
        我是固定底部导航
    </footer>

</body>

<script>
    var type = 0;
    var pn = 0;
    render();
    // getData();
    $(".content  button").live("click", function () {
        type = $(this).attr("list-style");
        // http://vebcoder.cn:9090//artist/artistInfo?category=0&pn=1&rn=100
        // console.log(type);

        render();
    })
    function render() {
        pn = 1;
        // console.log(pn);

        $("#loading").show();
        $.get("http://vebcoder.cn:9090/artist/artistInfo", {
            category: type,
            rn: 48,
            pn: 1,
        }, function (res) {
            // console.log(res);
            var list = res.data.artistList;
            var html = "";
            for (var i = 0; i < list.length; i++) {
                html += '<li><img src="' + list[i].pic + '"><h4>' + list[i].name + '<a href="songs.html?artistid=' + list[i].id + '">单曲</a></h4>'
            }
            // foot_list.innerHTML += html;
            $("#foot_list").html(html);
            $("#loading").hide();
            isc.refresh();
        })
    }
    function nextPage() {
        pn++;
        // console.log(pn);

        $("#loading").show();
        $.get("http://vebcoder.cn:9090/artist/artistInfo", {
            category: type,
            rn: 48,
            pn: pn,
        }, function (res) {
            // console.log(res);
            var list = res.data.artistList;
            var html = "";
            for (var i = 0; i < list.length; i++) {
                html += '<li><img src="' + list[i].pic + '"><h4>' + list[i].name + '<a href="songs.html?artistid=' + list[i].id + '">单曲</a></h4></li>'
            }
            foot_list.innerHTML += html;

            $("#loading").hide();
            isc.refresh();
        })
    }
    var isc = new iScroll("content_view", {
        topOffset: 40,
        y: -40,
        onScrollMove: function () {

            if (this.y > 50) {
                this.minScrollY = 0;
                $(".tip").html("松开立即刷新")
            } else {
                this.minScrollY = -40;
                $(".tip").html("下拉刷新")
            }

        },
        onScrollEnd: function () {

            if (this.minScrollY == 0) {

                $(".tip").html("正在刷新中...")
                // 重新请求数据 渲染页面
                render();
            }
            if (this.y == this.maxScrollY) {
                // 触底
                nextPage();
                // console.log("233333");

            }
        }

    })





</script>

</html>